<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>奖品兑换</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
				<link rel="stylesheet" type="text/css" href="css/hehua.css" />
		<link rel="stylesheet" href="css/exchange.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/allianceAlert/alert.css"/>-->

		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>
		<div class="top">
			<div class="top-logo">
			</div>
			<div class="top-theme">
			</div>
			<div class="top-title">
			</div>

		</div>
		<div class="bottom">
			<div class="bottom-logo2">
			</div>
		</div>
		<div class="content">

			<div class="middlePath">
				<div class="title">
					<img src="img/prizeExchange.png" alt="">
				</div>
				<div class="exchangeItems">
					<div class="innerItem">
						<div class="item" v-for="(item,index) in items" :key="index">
							<div class="itemImg"><img :src="item.src" /></div>
							<div class="itemName">{{item.name}}</div>
							<div class="itemStock">{{item.stock}}库存</div>
							<div class="itemNumber">{{item.number}}朵荷花</div>
							<div class="itemTime">倒计时{{item.time}}</div>
							<div class="exchangeBtn">兑换</div>
						</div>
					</div>
				</div>

				<div class="page">
					<!--<span>页码</span>
					<span>1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<span>5</span>
					<span>6</span>-->
				</div>

			</div>
			<div class="backBtn" onclick="history.go(-1);">返回</div>
			<!--<div class="bottom-logo">
				<img src="img/bottom_logo2.png" />
			</div>-->
		</div>
		<!-- 弹框 -->
		<div class="success" style="display: none;">
			<div class="tipBox">
				<div class="innerBox">
					<div class="tip">提示</div>
					<div class="msg">提交成功！</div>
					<div class="certain">确定</div>
				</div>
			</div>
		</div>
		<div class="fail"  style="display: none;">
			<div class="tipBox">
				<div class="innerBox">
					<div class="tip">提示</div>
					<div class="msg">本商品已兑换完毕！</div>
					<div class="again">下次再来！</div>
				</div>
			</div>

		</div>

		<script>
			var app = new Vue({
				el: '.content',
				data: {
					items: [{
							id: 1,
							name: "奖品名称",
							src: "img/itemImg.png",
							stock: 30,
							number: 500,
							time: "**h**m**s"
						},
						{
							id: 2,
							name: "奖品名称",
							src: "img/itemImg.png",
							stock: 30,
							number: 500,
							time: "**h**m**s"
						},
						{
							id: 3,
							name: "奖品名称",
							src: "img/itemImg.png",
							stock: 30,
							number: 500,
							time: "**h**m**s"
						},
						{
							id: 4,
							name: "奖品名称",
							src: "img/itemImg.png",
							stock: 30,
							number: 500,
							time: "**h**m**s"
						},
					]
				}
			})
		</script>
		<script type="text/javascript">
			$(".exchangeBtn").click(function() {
				//				$(".success").show();
				$(".fail").show()

			})
			$(".certain").click(function() {
				$(".success").hide()
			})
			$(".again").click(function() {
				$(".fail").hide()
			})
		</script>
	</body>

</html>